class GlassZoom {
    constructor(id) {
        this.root = document.querySelector(id)
        this.mask = this.root.querySelector('.mask') //遮罩层mask
        this.showBox = this.root.querySelector('.show-box') //显示图片showBox
        this.bigGlass = this.root.querySelector('.right') //放大镜bigGlass
        this.bigPicBox = this.root.querySelector('.right>img') //背景图bigpicBox
        this.lisEle = this.root.querySelectorAll('ul>li') //获取所有tab切换小图
        this.showImg = this.root.querySelector('.show-box>img') //显示图片
    }

    setScale() {
        this.bigPicBox.style.width =
            (this.bigGlass.offsetWidth * this.showBox.offsetWidth) /
            this.mask.offsetWidth +
            'px'
        this.bigPicBox.style.height =
            (this.bigGlass.offsetHeight * this.showBox.offsetHeight) /
            this.mask.offsetHeight +
            'px'
    }

    // 放大镜功能
    moveGlass() {
        let _this = this

        //移入显示遮罩层
        this.showBox.onmouseover = function () {
            _this.mask.style.display = 'block'
            _this.bigGlass.style.display = 'block'
            _this.setScale()

        }
        //移出隐藏遮罩层
        this.showBox.onmouseout = function () {
            _this.mask.style.display = 'none'
            _this.bigGlass.style.display = 'none'
        }

        // 移动遮罩层
        this.showBox.onmousemove = function (e) {
            e = e || window.event //事件对象

            let x = e.offsetX - _this.mask.offsetWidth / 2
            let y = e.offsetY - _this.mask.offsetHeight / 2

            // 限制遮罩层不移出边框
            if (x < 0) {
                x = 0
            }

            if (x > _this.showBox.offsetWidth - _this.mask.offsetWidth) {
                x = _this.showBox.offsetWidth - _this.mask.offsetWidth
            }

            if (y < 0) {
                y = 0
            }

            if (y > _this.showBox.offsetHeight - _this.mask.offsetHeight) {
                y = _this.showBox.offsetHeight - _this.mask.offsetHeight
            }

            _this.mask.style.left = x + 'px'
            _this.mask.style.top = y + 'px'

            let moveX = (x * _this.bigGlass.offsetWidth) / _this.mask.offsetWidth
            let moveY = (y * _this.bigGlass.offsetHeight) / _this.mask.offsetHeight


            _this.bigPicBox.style.left = -moveX + 'px'
            _this.bigPicBox.style.top = -moveY + 'px'


        }
    }

    // 选项卡
    onTabGlass() {
        let _this = this
        for (let i = 0; i < this.lisEle.length; i++) {
            this.lisEle[i].onmouseover = function () {
                _this.onClear()
                this.classList.add('active')
                let img = this.firstElementChild.getAttribute('src')
                _this.showImg.setAttribute('src', img)
                _this.bigPicBox.setAttribute('src', img)
            }
        }
    }

    // 清除选项卡样式
    onClear() {
        for (let i = 0; i < this.lisEle.length; i++) {
            this.lisEle[i].classList.remove('active')
        }
    }
}